<template>
  <div :class="[formOptionState.card ? 'a-form-card' : 'a-form']">
    <el-row :gutter="20">
      <template
        v-for="(item, index) in formOptionState.columns"
        :key="item.prop"
      >
        <el-col
          :span="item.row ? 24 : formOptionState.descLabelWidthSpan || 12"
          :xs="24"
          :sm="item.row ? 24 : 12"
          :md="item.row ? 24 : formOptionState.descLabelWidthSpan || 12"
          :lg="item.row ? 24 : formOptionState.descLabelWidthSpan || 12"
          :xl="item.row ? 24 : formOptionState.descLabelWidthSpan || 12"
          class="a-form-col"
          :style="{
            paddingLeft: formOptionState.space ? '0px' : '12px',
            paddingRight: formOptionState.space ? '0px' : '12px',
          }"
        >
          <div
            class="a-form-label"
            :style="{
              width: formOptionState.descLabelWidth
                ? `${formOptionState.descLabelWidth}px`
                : '80px',
              display: 'flex',
              justifyContent: formOptionState.descLabelAlign || 'left',
              alignItems: 'center',
            }"
            :class="[formOptionState.border ? 'a-form-border' : '']"
          >
            {{ item.label }}
          </div>
          <div
            class="a-form-label"
            :style="{
              width: formOptionState.descLabelWidth
                ? `calc(100% - ${formOptionState.descLabelWidth}px + 2px)`
                : 'calc(100% - 78px)',
              display: 'flex',
              justifyContent: item.descAlign || 'left',
              alignItems: 'center',
            }"
            :class="[formOptionState.border ? 'a-form-border' : '']"
          >
            <!-- 原始数据渲染 -->
            <el-text
              v-if="!item.formSlot"
              :line-clamp="item.lineClamp"
              :style="{ cursor: item.lineClamp ? 'pointer' : '' }"
            >
              {{ ruleFormState[item.prop] }}
            </el-text>
            <!-- 自定义插槽渲染 -->
            <el-text
              v-if="item.formSlot"
              :line-clamp="item.lineClamp"
              :style="{ cursor: item.lineClamp ? 'pointer' : '' }"
            >
              <slot :name="item.prop + 'Form'" :formItem="item"> </slot>
            </el-text>
          </div>
        </el-col>
      </template>
      <div
        class="btns"
        :style="{ 'text-align': formOptionState.descMenuPosition || 'left' }"
      >
        <slot name="menuForm"></slot>
        <el-button v-if="formOptionState.closeBtn" @click="onRest">
          {{
            formOptionState.closeBtnText
              ? formOptionState.closeBtnText
              : $t("globalSetting.closeBtn")
          }}
        </el-button>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
  formOption: {
    type: Object,
    default: () => {},
  },
});
const { modelValue, formOption, type } = toRefs(props);
const emit = defineEmits();

// 计算双向绑定的值
const ruleFormState = computed({
  get() {
    // console.log('modelValue', modelValue.value)
    return modelValue.value;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

// 重新计算value
const formOptionState = computed(() => {
  return formOption.value;
});

// 重置表单值的方法
function onRest() {
  emit("onRest");
}

defineExpose({
  onRest,
});
</script>

<style lang="scss" scoped>
.a-form {
  padding: 10px;
  .btns {
    width: 100%;
    margin-top: 12px;
  }
}

.a-form-card {
  padding: 18px 18px 0 18px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
  .btns {
    width: 100%;
    margin: 12px 0;
  }
}

.a-form-border {
  border: 1px solid #ebeef5;
  margin: 0px -1px -1px 0px;
}
.a-form-col {
  display: flex;
  // padding: 0 !important;
}
.a-form-label {
  width: 100%;
  padding: 8px 11px;
  font-size: 14px;
  color: #606266;
}
</style>